import { Layout, Menu, Avatar, Breadcrumb, Input, Button } from '@arco-design/web-react';
import { Outlet, Link, useLocation, useNavigate } from 'react-router-dom'
import { useEffect, useState } from 'react';
import {
  IconMenuFold,
  IconNotification
} from '@arco-design/web-react/icon';
import "./Home.css";
import navLists from "../../utils/navList";
// 布局
const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;
const Sider = Layout.Sider;
const Header = Layout.Header;
const Content = Layout.Content;
// 面包屑组件
const BreadcrumbItem = Breadcrumb.Item;
// 搜索框组件
const InputSearch = Input.Search;

const Home = () => {
  // 用户名
  const [nickName, setNickName] = useState('测试用户');
  // 路由信息
  let location = useLocation();
  // 菜单
  const [collapse, setCollapse] = useState(false);
  // 导航方案一
  const [subItems, setSubItems] = useState(() => {
    if (sessionStorage.getItem('navList')) {
      return JSON.parse(sessionStorage.getItem('navList'))
    } else {
      return navLists
    }
  });
  // 动态权限
  // let navList;
  // 导航方案二
  // useEffect(() => {
  //   if (sessionStorage.getItem('navList')) {
  //     navList = JSON.parse(sessionStorage.getItem('navList'))
  //     console.log(navList);
  //   } else {
  //     navList = navLists
  //   }
  //   setSubItems(navList)
  // }, [])
  // 导航方案二
  const [menuData, setMenuData] = useState([])


  // 动态导航-----方案一
  const menuListItems = subItems.map((item, i) => {
    // let Icon = Icons[item.icon]
    if (item.children && item.children !== '' && item.children.length > 0 && item.children !== undefined) {
      return (
        <SubMenu key={item.permissionsUrl} icon={item.icon} title={item.permissionsTitle}>
          {
            item.children.map((child) => {
              return (
                <MenuItem key={child.permissionsUrl}>
                  {child.permissionsTitle}
                </MenuItem >
              )
            })
          }
        </SubMenu>
      )
    }
    else {
      return (
        <Link to={item.permissionsUrl} key={item.permissionsUrl}>
          <MenuItem key={item.permissionsUrl}>
            {item.permissionsTitle}
          </MenuItem >
        </Link>
      )
    }
  })

  // 动态导航-----方案二
  // const getMenuData = async () => {
  //   setMenuData(navList)
  // }
  // useEffect(() => {
  //   getMenuData()
  // }, [])
  // useEffect(() => {
  //   console.log(subItems);
  //   if (location.pathname == '/home') {
  //     hitory('/home/index')
  //   }
  // })
  // 无子集
  // const renderNoChild = (item) => {
  //   return (
  //     <Link to={item.permissionsUrl} key={item.permissionsUrl}>
  //       <MenuItem key={item.permissionsUrl}>
  //         <i className={item.icon}></i>
  //         {item.permissionsTitle}
  //       </MenuItem >
  //     </Link>
  //   )
  // }
  // 有子集菜单
  // const renderChildMenu = (item) => {
  //   <i className={item.icon}></i>
  //   return <SubMenu key={item.permissionsUrl} title={item.permissionsTitle}>
  //     {
  //       item.children.map((child) => {
  //         return renderMenu(child)
  //       })
  //     }
  //   </SubMenu>
  // }
  // 动态导航
  // const renderMenu = (item) => {
  //   return item.children && item.children !== '' && item.children.length > 0 && item.children !== undefined ? renderChildMenu(item) : renderNoChild(item)
  // }
  // 面包屑判断
  const Bread = () => {
    if (location.pathname !== '/home/index') {
      return (
        <div className="breadcrumb">
          <Breadcrumb>
            <BreadcrumbItem>Home</BreadcrumbItem>
            <BreadcrumbItem>Channel</BreadcrumbItem>
          </Breadcrumb>
        </div>
      )
    }
  }
  // 菜单重定向
  const hitory = useNavigate()
  const menuRedirect = (target) => {
    if (target == '/home/operations') {
      hitory('/home/equipment')
    } else if (target == '/home/report') {
      hitory('/home/report/parkingRecord')
    } else if (target == '/home/finance') {
      hitory('/home/finance/index')
    } else if (target == '/home/system') {
      hitory('/home/system/account')
    } else {
      hitory(target)
    }
  }
  // 面包屑数据
  const breadcrumbNameMap = {//跟路由路径保持一致
    "/home/index": "首页",
    "/home/car": "车辆管理",
    "/home/report/etc": "etc",
  };

  return (
    <>
      <div className="home_wrap">
        <div className="layout-basic-demo">
          <Layout style={{ height: '400px' }}>
            <Layout>
              <Sider>

                {/* -----------------------------logo------------------------- */}

                <div className="logo">
                  <p>我是公司LOGO</p>
                </div>

                {/* -----------------------------导航------------------------- */}

                <div className="home_nav">
                  <div className='menu-demo'>
                    <Menu
                      style={{ width: 200, borderRadius: 4 }}
                      theme='dark'
                      collapse={collapse}
                      defaultSelectedKeys={['/home/index']}
                      selectedKeys={location.pathname}
                      onClickSubMenu={menuRedirect}
                      onClickMenuItem={(path) => { hitory(path) }}
                    >
                      {/* 方案一 */}
                      {menuListItems}

                      {/* 方案二 */}
                      {/* {menuData.map((item) => renderMenu(item))} */}
                    </Menu>
                  </div>
                </div>
              </Sider>
              <Content style={{ height: '100%' }}>
                {/* 顶部header */}
                {/*  */}
                <Header>
                  <div className="header_wrap">
                    <div className="header_left">
                      <IconMenuFold style={{
                        padding: '0 12px',
                        height: 30,
                        lineHeight: '30px',
                        marginBottom: 4,
                      }}
                        type='primary'
                        onClick={() => setCollapse(!collapse)} />

                    </div>

                    <div className="header_right">

                      {/* 顶部icon && 搜索*/}
                      <InputSearch
                        searchButton
                        placeholder='Enter keyword to search'
                        style={{ width: 350 }}
                      />
                      <IconNotification />

                      {/* 头像 */}
                      <Avatar>
                        <img
                          alt='avatar'
                          src='//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp'
                        />
                      </Avatar>

                      {/* 昵称 */}
                      <p>{nickName}</p>
                    </div>
                  </div>

                </Header>
                {/* 面包屑 */}

                <Bread />

                {/* 应用 */}
                <div className="main_wrap">
                  <Outlet />
                </div>
              </Content>
            </Layout>
          </Layout>
        </div>

      </div>
    </>
  )
}
export default Home